/*
 * @Date: 2023-12-13 09:56:05
 * @LastEditors: lyx
 * @LastEditTime: 2024-03-14 10:24:05
 * @FilePath: \taro-template3\src\components\CustomFooter\index.tsx
 * @Description:
 */
import { View } from "@tarojs/components";
import cName from "classnames";
import useCustomFooter from "./hooks/useCustomFooter";
import TextInput from "./TextInput";
import VoiceInput from "@/components/CustomFooter/VoiceInput";
import styles from "./index.module.scss";
import PlugInSheet from "../PlugInSheet";
import { IconFont } from "@nutui/icons-react-taro";
import keyboard from "@/assets/images/keyboardInput.png";
import { SafeArea } from '@nutui/nutui-react-taro'
import { Button } from '@nutui/nutui-react-taro';
import { useContext, useState } from "react";
import { ChatContext } from "@/pages/index/hooks/store";


function CustomFooter() {
  const customFooterInst = useCustomFooter();
  const { isLoading, cancelAsk } = useContext(ChatContext);

  return (
    <View className={styles["wrapper"]}>

      <View className={styles["wrapper-opetate"]}>
        {/* 停止生成 */}
        {
          isLoading && !customFooterInst.voiceState &&
          <View className={styles["stop-genetate"]}>
            <Button
              size="mini"
              type="warning"
              onClick={() => {
                cancelAsk();
              }}
            >
              停止生成
            </Button>
          </View>
        }

      </View>
      <View
        className={cName(styles["custom-footer-wrapper"], {
          [styles["top-border"]]: !customFooterInst.voiceState,
        })}
      >
        <View className={styles["custom-footer"]}>
          {/* 插件 */}
          <View className={styles["feature"]}>
            <PlugInSheet />
          </View>
          <View className={styles["contain"]}>
            {customFooterInst.voiceState ? (
              <VoiceInput />
            ) : (
              <TextInput
                onClick={() => {
                  console.log("TextInput onClick 123");
                  customFooterInst.setVoiceState(true);
                }}
              />
            )}
          </View>

          {/* 键盘输入切换 */}
          {customFooterInst.voiceState && (
            <View className={styles["feature"]}>
              <IconFont
                name={keyboard}
                size="2rem"
                onClick={() => {
                  customFooterInst.setVoiceState(false);
                }}
              />
            </View>
          )}
        </View>
        <SafeArea position="bottom" />
      </View>

    </View>


  );
}

export default CustomFooter;
